<meta charset="UTF-8">
<title>打印</title>

<canvas id="canvas"></canvas>
<br>
<br>
面单宽度(cm)：<input type="number" id="width_input" value="80" />
<br>
面单高度(cm)：<input type="number" id="hieght_input" value="136" />
<br>
<br>
打印方向：
正常<input type="radio" name="direction_radio" id="direction_radio_true" value="true" />
90°<input type="radio" name="direction_radio" id="direction_radio_false" value="false" checked />
<br>
背景色：<input type="color" id="background_input" value="#FFFFFF" />
<br>
<br>
文字大小：<input type="number" id="font_size_input" value="130" />
<br>
文字颜色：<input type="color" id="font_color_input" value="#000000" />
<br>
打印内容：<textarea id="print_textbox">退：XX中心
XXSS
</textarea>
<br>
<button id="print_button">打印</button>

<style>
    #canvas {
        border: 1px #ccc solid;
    }

    #print_textbox {
        width: 177px;
        height: 150px;
        resize: none;
    }
</style>

<script>
    /** @type{ HTMLCanvasElement } */
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    /** @type{ HTMLInputElement } */
    const width_input = document.getElementById("width_input");
    /** @type{ HTMLInputElement } */
    const hieght_input = document.getElementById("hieght_input");

    /** @type{ NodeListOf<HTMLInputElement> } */
    const direction_radio = document.getElementsByName("direction_radio");

    /** @type{ HTMLInputElement } */
    const background_input = document.getElementById("background_input");

    /** @type{ HTMLInputElement } */
    const font_size_input = document.getElementById("font_size_input");
    /** @type{ HTMLInputElement } */
    const font_color_input = document.getElementById("font_color_input");
    /** @type{ HTMLTextAreaElement } */
    const print_textbox = document.getElementById("print_textbox");

    /** @type{ HTMLButtonElement } */
    const print_button = document.getElementById("print_button");

    const get_direction = function () {
        for (const element of direction_radio) {
            if (element.checked) {
                return element.value === "true";
            }
        }
        return false;
    };

    /** @type{ HTMLInputElement["oninput"] } */
    const canvas_draw = function () {
        const inputWidth = width_input.value;
        const inputHeight = hieght_input.value;
        const direction = get_direction();
        const background = background_input.value;
        const font_color = font_color_input.value;
        const font_size = font_size_input.value;
        const print_context = print_textbox.value.trim().split("\n");
        const print_length = print_context.length;

        const width = canvas.width = (direction ? inputWidth : inputHeight) * 5.57;
        const height = canvas.height = (direction ? inputHeight : inputWidth) * 5.57;

        canvas.style.width = (direction ? inputWidth : inputHeight) + "mm";
        canvas.style.height = (direction ? inputHeight : inputWidth) + "mm";

        context.imageSmoothingEnabled = false;

        context.save();
        context.fillStyle = background;
        context.fillRect(0, 0, width, height);
        context.restore();

        const print_height = height / print_length;

        context.save();
        context.font = `${font_size}px bold 微软雅黑`;
        context.fillStyle = font_color;
        context.textAlign = "center";
        context.textBaseline = "middle";
        for (let i = 0; i < print_length; i++) {
            const text = print_context[i];
            context.fillText(text, width / 2, print_height * (i + 0.5 + 0.1));
        }
        context.restore();
    };

    const canvas_print = function () {
        const width = canvas.width;
        const height = canvas.height;
        const direction = get_direction();
        const new_window = window.open();
        const width_big = width > height;

        new_window.document.write(`
<style>
    body{ margin: 0; }
    ${direction ? "" : `img{
        transform: rotate( 90deg );
        transform-origin: ${height / width * 50}% 50%;
    }`}
</style>
<img src="${canvas.toDataURL()}" />
        `);
        setTimeout(() => {
            new_window.print();
            new_window.close();
        });
    };

    document.querySelectorAll("input,textarea").forEach(input => {
        input.oninput = canvas_draw;
    });

    document.querySelectorAll("input[type='number']").forEach(input => {
        /** @param e { MouseEvent & { target:HTMLInputElement; wheelDelta: number; } } */
        input.onmousewheel = function (e) {
            e.preventDefault();
            const isUp = e.wheelDelta > 0;
            const changeSpace = e.ctrlKey && e.shiftKey
                ? 1000
                : e.shiftKey
                    ? 100
                    : e.ctrlKey
                        ? 10
                        : 1;
            const changeValue = isUp ? changeSpace : -changeSpace;
            e.target.value = (parseInt(e.target.value) + changeValue).toString();
            canvas_draw();
        };
    });

    print_button.onclick = function () {
        canvas_print();
    };

    canvas_draw();

</script>